import React, {PropsWithChildren, useCallback, useEffect, useState} from 'react'
import {View} from "@tarojs/components";
import styles from "./employees.module.sass"
import {Button, Cell, SearchBar, Space, Tag, VirtualList} from "@nutui/nutui-react-taro";
import {Add, FilterH} from "@nutui/icons-react-taro";
import {EmployeeResponse, queryEmployees} from "../apis/EmployeeApi";
import {PAGE_START, Pageable} from "../utils/Page";
import Taro, {useDidShow} from "@tarojs/taro";
import FloatButton from "../components/FloatButton";
import employeeStore from "../store/EmployeeStore";
import {observer} from "mobx-react";
import MyNavigationBar from "../components/MyNavigationBar";

export interface EmployeesProps extends PropsWithChildren {

}

const Employees: React.FC<EmployeesProps> = ({}) => {
    const [searchNameText, setSearchNameText] = useState<string>()
    const [searchInputValue, setSearchInputValue] = useState("")
    const [loading, setLoading] = useState(false)
    const [data, setData] = useState<EmployeeResponse[]>([])
    const [pageable, setPageable] = useState(new Pageable(PAGE_START, 20))
    const [last, setLast] = useState(true)
    const query = useCallback(() => {
        setLoading(true)
        let name = searchNameText?.trim() || undefined;
        queryEmployees(pageable, {searchInput:name},).then(res => {
            setData(data.concat(res.data.content))
            setLast(res.data.last)
        }).finally(() => {
            setLoading(false)
        })
    }, [searchNameText, ...pageable.toDependencyList()]);

    useEffect(() => {
        query()
    }, [query]);
    useDidShow(()=>{
        if (!!data.length){
            let newPageable = new Pageable(PAGE_START, 20);
            if (pageable.toString()===newPageable.toString()){
                query()
            }else {
                setPageable(newPageable)
            }
            setData([])
        }
    })

    function onSearch() {
        setData([])
        setLast(true)
        setPageable(new Pageable(PAGE_START, 20))
        setSearchNameText(searchInputValue)
    }

    return <>
        <MyNavigationBar>人员</MyNavigationBar>
        <View className={styles.container}>
            <SearchBar value={searchInputValue} shape="round" maxLength={9999} right={
                <Button type={"primary"} size={"small"} loading={loading} onClick={onSearch}>搜索</Button>
            } left={<FilterH onClick={() => {
            }}/>} onChange={value => {
                setSearchInputValue(value.trim())
            }} onSearch={onSearch} placeholder={"人员、卖场"}/>
            <VirtualList className={styles.scrollView}
                         onScroll={() => {
                             if (!last && !loading) {
                                 setPageable(pageable.next)
                             }
                         }}
                         list={data}
                         itemRender={(employee: EmployeeResponse) => {
                             return <Cell style={{margin: 0}}
                                          description={<Space>
                                              {employee.roles.map(role => {
                                                  return <Tag type={"primary"} key={role.id}>{role.name}</Tag>
                                              })}
                                          </Space>}
                                          onClick={() => {
                                              Taro.navigateTo({
                                                  url: `/pages/employeeDetail?id=${employee.id}`
                                              })
                                          }} title={employee.name}/>;
                         }}/>
            {employeeStore.hasAuthority("人员_新增")&&<FloatButton icon={<Add/>} onClick={async () => {
                await Taro.navigateTo({
                    url: "/pages/addEmployee"
                })
            }}/>}
        </View>
    </>
}

export default observer(Employees)


